Hello!
This ist the source-code for an editable combobox implemented with
HTML,CSS and Javascript.
I have tested it with IE and Mozilla. But I don't know, if it will
work in other browsers (Opera, Konqueror, etc.) So I need your
feedback...
Regards
Oliver
--- SNIP ---
<html>
<head>
<style type="text/css">
<!--
div.cbhide {
position:absolu te;
visibility:hidd en;
overflow:hidden ;
height:0px;
}
div.cbshow {
position:absolu te;
visibility:visi ble;
overflow:visibl e;
}
table.combo {
width:100%;
border: 1px solid #000000;
}
#cbtext {
background-color:#FFFF99;
}
#cbbtn{
border-color:#FFFFFF;
border-width:2px;
border-style:outset;
cursor:pointer;
background-color:#CCCCCC;
text-align:center
vertical-align:middle;
margin:0px;
padding:0px;
height:100%;
}
td.passive {
color:#000000;
background-color:#FFFF99;
}
td.active {
color:#FFFFFF;
background-color:#0000FF;
}
-->
</style>
<script type="text/javascript">
<!--
function mousedown(obj) {
var select = document.getEle mentById('cbsel ect');
var temp = obj.target;
while(temp != null && temp != select) {
temp = temp.parentNode ;
}
if(temp == select) {
obj.target.hand leEvent(obj);
} else {
hide();
}
}
function hide() {
document.getEle mentById('cbsel ect').className ='cbhide';
document.getEle mentById('cbbtn ').onclick=show ;
document.onmous edown = null;
return true;
}
function show() {
var node = document.getEle mentById('cbtex t');
var x = Number(node.off setLeft) + Number(document .body.leftMargi n);
var y = Number(node.off setTop) + Number(node.off setHeight) +
Number(document .body.topMargin );
var w = Number(node.off setWidth)
var div = document.getEle mentById('cbsel ect');
div.className=' cbshow';
div.style.top = y;
div.style.left = x;
div.style.width = w;
document.getEle mentById('cbbtn ').onclick=hide ;
if(document.add EventListener) {
document.onmous edown = mousedown;
} else {
document.getEle mentById('cbbtn ').onblur=hide;
}
}
function select(td) {
td.className='p assive'
var text = td.firstChild.n odeValue;
document.getEle mentById('cbtex t').value = text;
hide();
}
//-->
</script>
</head>
<body>
<table class="comboinp ut" cellspacing="0" cellpadding="0" >
<tr class="comboinp ut">
<td class="comboinp ut"><input id="cbtext" type="text"
name="test"></td>
<td class="comboinp ut">
<button id="cbbtn" type="button"
onmousedown = "this.style.bor derStyle='inset '"
onmouseup = "this.style.bor derStyle='outse t'"
onmouseout = "this.style.bor derStyle='outse t'"
onclick="show() ">
<img src="open.gif">
</button>
</td>
<!-- <td class="comboinp ut">
<button type="button" onclick="alert( 'Click')">Click </button>
</td> -->
</tr>
</table>
<div id="cbselect" class="cbhide">
<table class="combo" cellspacing="0" cellpadding="0" >
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Apple</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Cherry</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Melon</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Lemon</td>
</tr>
<tr class="option">
<td class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Peach</td>
</tr>
<tr class="option">
<td nowrap class="passive" onMouseover="th is.className='a ctive';"
onMouseout="thi s.className='pa ssive';" onClick="select (this)"
onFocus="select (this)">Plum</td>
</tr>
</table>
</div>
</body>
</html>
